Next.js の API のテストに Jest を使用する
https://gyazo.com/2223461edd82cd5c1067cbcfe6f91577
Next.js を触っていてほぼテストは書いていなかったのですが、流石に API くらいはテスト書こうと思って導入しました。
基本は Express ベースなのでその辺りを参考に Jest を導入しました。 インストールと設定
TypeScript を使用しているので、 ts-jest なども合わせてインストールします。
code:bash
yarn add --dev jest ts-jest @types/jest ts-node
jest のインストールが終了したら初期化コマンドを実行します。
あとで設定が終わると、 jest.config.js が作成されます。
あとでも変更可能なようなので、とりあえずで選択しました。
code:bash
% yarn jest --init
yarn run v1.22.10
The following questions will help Jest to create a suitable configuration for your project
✔ Would you like to use Jest when running "test" script in "package.json"? … yes
✔ Would you like to use Typescript for the configuration file? … yes
✔ Choose the test environment that will be used for testing › node
✔ Do you want Jest to add coverage reports? … yes
✔ Which provider should be used to instrument code for coverage? › v8
✔ Automatically clear mock calls and instances between every test? … yes
✏️ Modified /.../package.json
📝 Configuration file created at /.../jest.config.ts
✨ Done in 199.26s.
jest.config.js の以下の項目を変更します。
code:js
// An array of file extensions your modules use
// ...
// A list of paths to directories that Jest should use to search for files in
// ...
// The regexp pattern or array of patterns that Jest uses to detect test files
testRegex: '(/test/.*|(\\.|/)(test|spec))\\.tsx?$',
// ...
// A map from regular expressions to paths to transformers
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
テストを書く
テストは、 Next.js をインストールした時にデフォルトで入る？はずの /api/user/index エンドポイントに対して実施します。
このエンドポイントの正常系は 4 件のユーザーが応答されるはずです。
まずは、 HTTP リクエスト、レスポンスのモックが作れる node-mocks-http をインストールします。
code:bash
yarn add --dev node-mocks-http
テストは以下のように書きました。
これを tests ディレクトリ以下に作成します。
（先ほど作成した jest.config.js の testRegrex にて変更可能です。）
code:javascript
import httpMocks from 'node-mocks-http'
import { NextApiRequest, NextApiResponse } from 'next'
import handler from '../../../pages/api/users/index'
describe('/users handler', () => {
test('responds 200 to GET', async () => {
const req = httpMocks.createRequest<NextApiRequest>({
query: {
keyword: 'test',
},
})
const res = httpMocks.createResponse<NextApiResponse>()
await handler(req, res)
expect(res.statusCode).toBe(200)
expect(res._getJSONData().length).toBe(4)
})
})
これでテストを実行すれば通るかと思います。
code:bash
% yarn test
PASS tests/api/users/index.test.ts
/api/users/index handler
✓ responds 200 to GET (15 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.398 s, estimated 3 s
Ran all test suites.
✨ Done in 5.55s.
環境変数を使用する
Next.js だと dotenv を使って環境変数を定義していますが、 Jest のデフォルトだとロードしてくれないようなので自分で定義を作る必要がありそうです。
まずはセットアップファイルを作成します。
next をインポートするだけです。
code:setup.ts
import next from 'next'
next({})
これを jest.config.ts にてセットアップスクリプトとして含めます。
code:jest.config.ts
これで process.env にて、環境変数が読み込まれるようになります。
さいごに
とりあえず最初のテストを作成することができました。
ググっていたら、 next-test-api-route-handler の方がシンプルだよっていってる人もいました。